<template>
  <div class="operational_people_page">
    <div class="box_shallow search_box">
      <div class="search_form">
        <div class="search_form_items">
          <div class="search_form_item">
            <div class="key">手机号码</div>
            <el-input placeholder="请输入" v-model="form.contactPhone"></el-input>
          </div>
          <div class="search_form_item">
            <div class="key">姓名</div>
            <el-input placeholder="请输入" v-model="form.contactName"></el-input>
          </div>
          <div class="search_form_item">
            <div class="key">新增日期</div>
            <el-input placeholder="请输入" v-model="form.createTime"></el-input>
          </div>
        </div>
        <el-button type="primary" class="btn_search" @click="search">
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button type="primary" class="btn_add" @click="addFn">
        <i class="el-icon-plus"></i>
        新增人员
      </el-button>
    </div>
    <div class="box_shallow table_box">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editFn(scope.row.userId)">编辑</el-button>
            <el-button class="mid_btn" type="text" @click="lookFn(scope.row.userId)">查看</el-button>
            <el-popconfirm title="确定删除？" @confirm="delFn(scope.row.userId)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :hidden="pagination.total === 0"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.pageNum"
        :limit="10"
        @pagination="paginationChange"
      />
    </div>
  </div>
</template>

<script>
import { operationList, delOperation } from '@/api/companyManage'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      form: {
        contactPhone: '',
        contactName: '',
        createTime: '',
      },
      columns: [],
      tableData: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
    }
  },
  created() {
    this.columns = [
      {
        type: 'index',
        label: '序号'
      },
      {
        prop: 'contactPhone',
        label: '手机号码'
      },
      {
        prop: 'contactName',
        label: '姓名'
      },
      {
        prop: 'contactId',
        label: '身份证号'
      },
      {
        prop: 'contactEmail',
        label: '邮箱'
      },
      {
        prop: 'createTime',
        label: '新增日期'
      },
      {
        prop: 'status',
        label: '状态',
        formatter: (row, column, cellValue, index) => {
          if (cellValue === '0') {
            return '启用'
          } else {
            return '暂停'
          }
        }
      },
    ]
  },
  mounted() {
    this.getOperationList()
  },
  methods: {
    search() {
      this.getOperationList()
    },
    getOperationList() {
      this.loading = true
      operationList({
        ...this.form,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.loading = false
        this.tableData = res.rows
        this.pagination.total = res.total
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getOperationList()
    },
    addFn() {
      this.$router.push({
        path: '/companyManage/addOperation'
      })
    },
    editFn(userId) {
      this.$router.push({
        path: '/companyManage/addOperation',
        query: {
          userId,
        }
      })
    },
    lookFn(userId) {
      this.$router.push({
        path: '/companyManage/operationDetail',
        query: {
          userId,
        }
      })
    },
    delFn(userId) {
      delOperation(userId).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getOperationList()
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '删除失败'
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.operational_people_page {
  .box_shallow {
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 16px;
  }
  .search_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    padding-right: 40px;
    height: 112px;
    .search_form {
      flex: 1 1 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search_form_items {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        .search_form_item {
          width: 33.33%;
          display: flex;
          align-items: center;
          .key {
            width: 110px;
            margin-right: 10px;
            text-align: right;
            color: #777;
            font-size: 14px;
          }
        }
      }
      .btn_search {
        margin-left: 20px;
      }
    }
    .btn_add {
      margin-left: 68px;
    }
  }
  .table_box {
    padding: 16px 16px 24px;
  }
  .mid_btn {
    margin: 0 30px;
  }
}
</style>
